var accordionHeights = [];

$(document).ready(function() {
	setAccordion();

	for (var i=0; i<$('.accordionContainer').length; i++) {
		accordionHeights.push($($('.accordionContainer')[i]).height());
	}

	$('.accordionContainer').css('height', '80px');
});

function setAccordion() {
	$('.unopened').click(function(e) {	
		e.stopPropagation();

		console.log($(e.target).attr('class'));
		var openStatus = $(e.target).attr('class').indexOf('unopened');
		var accordionIndex = 0;

		if ($(e.target).attr('class').indexOf('accordion1') != -1) {
			accordionIndex = 0;
		} else if ($(e.target).attr('class').indexOf('accordion2') != -1) {
			accordionIndex = 1;
		} else if ($(e.target).attr('class').indexOf('accordion3') != -1) {
			accordionIndex = 2;
		} else if ($(e.target).attr('class').indexOf('accordion4') != -1) {
			accordionIndex = 3;
		}

		if (openStatus == -1) { // Opened
			console.log('This is opened accordion. Close it.');

			closeAccordion(accordionIndex);
		} else {	// Unopened
			console.log('This is closed accordion. Open it.');

			openAccordion(accordionIndex);
		}
	});
};

function closeAccordion(index) {
	$($('.accordionContainer')[index]).animate({
		height: 80
	}, 300, function() {

	});

	$($('.accordionContainer')[index]).find('.subtitle').css('color', '#333');
	$($('.accordionContainer')[index]).find('.coloredCheck').removeClass('coloredCheck').addClass('check');

	var accordionIndex = index + 1;

	$('.accordion' + accordionIndex).removeClass('opened').addClass('unopened');
}

function openAccordion(index) {
	$($('.accordionContainer')[index]).animate({
		height: accordionHeights[index]
	}, 300, function() {

	});

	$($('.accordionContainer')[index]).find('.subtitle').css('color', '#8614f4');
	$($('.accordionContainer')[index]).find('.check').removeClass('check').addClass('coloredCheck');

	var accordionIndex = index + 1;

	$('.accordion' + accordionIndex).removeClass('unopened').addClass('opened');
}